<template>
  <div class="template-edit">
    <el-dialog
      title="新增/编辑"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
      @close="editCancel"
    >
      <div class="dialog-body">
        <ul class="body-operation">
          <li>
            <span class="span1">模板名称:</span>
            <span class="span2">
              <el-input v-model="editInfo.templateName" placeholder="不超过10个字符" maxlength="10"></el-input>
            </span>
          </li>
          <li>
            <span class="span1">通道:</span>
            <span class="span2">
              <el-select v-model="editInfo.channelId" @change="selectChange" placeholder="请选择渠道">
                <el-option
                  v-for="item in channelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </span>
          </li>

          <li v-if="flag == 1 && editInfo.serviceProviderName">
            <span class="span1">服务商:</span>
            <span class="span2">
              <el-input v-model="editInfo.serviceProviderName" disabled placeholder="不超过20个字符"></el-input>
            </span>
          </li>
          <li v-else-if="flag == 2">
            <span class="span1">服务商:</span>
            <span class="span2">
              <el-input v-model="editInfo.serviceProviderName" disabled placeholder="不超过20个字符"></el-input>
            </span>
          </li>
          <li v-if="flag==1 && editInfo.channelAccount">
            <span class="span1">账号:</span>
            <span class="span2">
              <el-input
                v-model="editInfo.channelAccount"
                disabled
                placeholder="请输入账号"
                maxlength="20"
              ></el-input>
            </span>
          </li>
          <li v-else-if="flag == 2">
            <span class="span1">账号:</span>
            <span class="span2">
              <el-input
                v-model="editInfo.channelAccount"
                disabled
                placeholder="请输入账号"
                maxlength="20"
              ></el-input>
            </span>
          </li>
          <li v-if="signOptions.length != 0">
            <span class="span1">签名:</span>
            <span class="span2">
              <el-select v-model="editInfo.signName" placeholder="请选择签名">
                <el-option
                  v-for="item in signOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </span>
          </li>
          <li>
            <span class="span1">模板内容:</span>
            <span class="span2">
              <el-input
                v-model="editInfo.templateContent"
                type="textarea"
                :row="2"
                placeholder="请输入短信模板内容"
                maxlength="960"
              ></el-input>
            </span>
          </li>
        </ul>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editCancel">取 消</el-button>
        <el-button type="primary" @click="editSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["message", "flag"],
  data() {
    return {
      dialogVisible: true,
      editInfo: {
        templateName: "",
        channelId: "",
        templateContent: "",
        signName: "",
        serviceProviderName: "",
        channelAccount: ""
      },
      channelOptions: [],
      signOptions: []
    };
  },
  methods: {
    editCancel() {
      let that = this;
      that.editInfo = {
        templateName: "",
        channelId: "",
        templateContent: "",
        signName: "",
        serviceProviderName: "",
        channelAccount: ""
      };
      that.$emit("templateEdit", {});
    },
    editSure() {
      let that = this;

      //模板名称
      if (!that.editInfo.templateName) {
        that.showMsg("请输入模板名称", "error");
        return;
      }
      //通道
      if (!that.editInfo.channelId) {
        that.showMsg("请选择通道", "error");
        return;
      }
      //模板内容
      if (!that.editInfo.templateContent) {
        that.showMsg("请输入短信模板内容", "error");
        return;
      }

      if (that.flag == 1) {
        that.ajaxJson({
          url: "/channel/template/edit",
          data: that.editInfo,
          success: function(res) {
            if (res.code == "0") {
              that.showMsg("添加成功", "success");
              that.editCancel();
            }
          }
        });
      } else {
        that.ajaxJson({
          url: "/channel/template/edit",
          data: that.editInfo,
          success: function(res) {
            if (res.code == "0") {
              that.showMsg("修改成功", "success");
              that.editCancel();
            }
          }
        });
      }
    },
    // 选择通道改变
    selectChange(val) {
      let that = this;
      let id = val;
      that.ajaxJson({
        url: "/channel/sign/list/" + id,
        success: function(res) {
          if (res.code == "0") {
            that.editInfo.serviceProviderName =
              res.data.channelListDto.serviceProviderName;
            that.editInfo.channelAccount =
              res.data.channelListDto.channelAccount;
            that.signOptions = [];
            let signOptions = res.data.signVos != [] ? res.data.signVos : [];
            signOptions.forEach(item => {
              that.signOptions.push({
                value: item.id,
                label: item.signName
              });
            });
          }
        }
      });
    },
    //获取签名列表
    getSignList() {
      let that = this;
      that.ajaxJson({
        url: "/channel/sign/list/" + that.editInfo.channelId,
        success: function(res) {
          if (res.code == "0") {
            that.signOptions = [];
            let signOptions = res.data.signVos != [] ? res.data.signVos : [];
            signOptions.forEach(item => {
              that.signOptions.push({
                value: item.id,
                label: item.signName
              });
            });
          }
        }
      });
    },
    //通道选项
    getChannelList() {
      let that = this;
      that.ajaxJsonGet({
        url: "/channel/channel/list",
        data: {},
        success: function(res) {
          if (res.code == "0") {
            let channelOptions = res.data ? res.data : [];
            channelOptions.forEach(function(item, index) {
              that.channelOptions.push({
                value: item.id,
                label: item.channelName
              });
            });
          }
        }
      });
    }
  },
  created() {
    let that = this;
    that.getChannelList();
    if (that.message) {
      that.editInfo = that.message;
      that.getSignList();
    }
  }
};
</script>
<style lang="less">
.template-edit {
  .dialog-body {
    width: 100%;
    .body-message {
      width: 100%;
      overflow: hidden;
      li {
        width: 33.3%;
        float: left;
        line-height: 30px;
        .span1 {
          color: #999;
        }
        .span2 {
          color: #000;
        }
      }
    }
    .body-operation {
      margin-top: 20px;
      li {
        display: flex;
        line-height: 40px;
        margin-bottom: 10px;
        .span1 {
          width: 120px;
          flex: none;
          color: #999;
          text-align: right;
        }
        .span2 {
          flex: 1;
          margin-left: 20px;
          .el-input {
            width: 50% !important;
          }
          .inputWidth {
            width: 120px;
          }
          .el-select {
            .el-input {
              width: 100% !important;
            }
          }
          .el-input__inner {
            width: 100%;
            height: 36px;
            padding: 0 5px;
          }
          .el-checkbox__inner {
          }
        }
      }
    }
  }
}
</style>
